<template>
  <div style="padding:0 20px;">
    <div class="roleInput">
      <el-button type="primary"
                 size="medium"
                 @click="handleAdd">新建角色</el-button>
    </div>
    <div>
      <el-table ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                border>
        <el-table-column label="序号"
                         prop="id"
                         width="80"
                         align="center">
          <template scope="scope">
            <span>{{scope.$index+1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="role_name"
                         align="center"
                         width="200"
                         label="角色名称"></el-table-column>
        <el-table-column prop="status"
                         align="center"
                         width="200"
                         label="是否开启">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==1"
                    type="success">是</el-tag>
            <el-tag v-if="scope.row.status==0"
                    type="info">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time"
                         align="center"
                         width="200"
                         label="创建时间"></el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit"
                       type="text"
                       @click="handleEdit(scope.row)">编辑</el-button>
            <span style="padding:8px;"></span>
            <el-button type="text"
                       icon="el-icon-delete"
                       @click="handleDelete(scope.row)"
                       style="color: #f56c6c;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--添加组织名称-->
    <el-dialog :title="editTitle"
               :visible.sync="editVisible"
               width="30%">
      <div class="list-group">
        <div style="padding:10px;">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="list-title"><span class="mast-icon">*</span>角色名称:</div>
            </el-col>
            <el-col :span="18">
              <el-input v-model="roleName"
                        placeholder="请输角色名称"></el-input>
            </el-col>
          </el-row>
        </div>
        <div style="padding:10px;">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="list-title">是否开启:</div>
            </el-col>
            <el-col :span="18">
              <el-switch style="display: block"
                         v-model="status"
                         active-color="#13ce66"
                         inactive-color="#ff4949"
                         active-text="开启"
                         inactive-text="关闭"></el-switch>
            </el-col>
          </el-row>
        </div>
        <div style="padding:10px;">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="list-title">权限分配:</div>
            </el-col>
            <el-col :span="18">
              <el-tree v-if="showAuth"
                       ref="tree"
                       :data="treeData"
                       show-checkbox
                       node-key="id"
                       :default-expand-all="true"
                       :default-checked-keys="checkedKeys"
                       :props="defaultProps"
                       @check="getCheckedKeys"></el-tree>
            </el-col>
          </el-row>
        </div>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button size="medium" @click="editVisible = false">取 消</el-button>
        <el-button size="medium" type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api/index';
export default {
  data () {
    return {
      searchInput: '',
      tableData: [],
      editVisible: false,
      editTitle: '',
      roleName: '',
      roleId: '',
      editOrAdd: 1,
      status: true,
      is_gl: false,
      authIds: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'auth_name'
      },
      checkedKeys: [],
      showAuth: true,
    };
  },
  mounted () {
    this.initAjaxMethod();
  },
  methods: {
    //初始化页面列表
    initAjaxMethod () {
      const loading = this.$loading({ text: '加载中...' });
      this.$http
        .post(api.ROLE_INDEX, {})
        .then(res => {
          loading.close();
          console.log('角色列表', res);
          if (res.code == 1) {
            this.tableData = res.data.roleList;
            this.treeData = res.data.authList;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    //新增
    handleAdd () {
      this.editTitle = '添加角色';
      this.editVisible = true;
      this.editOrAdd = 1;
      this.roleName = '';
      this.status = true;
      this.is_gl = false;
      this.authIds = '';
      this.checkedKeys = [];
    },
    //点击编辑
    handleEdit (data) {
      console.log('data',data);
      this.editTitle = '编辑角色';
      this.editVisible = true;
      this.editOrAdd = 2;
      this.id = data.id;
      this.roleName = data.role_name;
      this.status = data.status == 1 ? true : false;
      this.is_gl = data.is_gl == 1 ? true : false;
      let authIds = [];
      for (let i in data.auth) {
        if (data.auth[i].level == 3 || data.auth[i].level == 1) {
          //authIds = [...authIds, data.auth[i].id];
          authIds.push(data.auth[i].id);
        }
      }
      console.log('authIds', authIds)
      this.checkedKeys = authIds;
      this.showAuth = false;
      setTimeout(() => {
        this.showAuth = true;
      }, 500)
    },
    getCheckedKeys () {
      let keysArr = this.$refs.tree.getCheckedKeys();
      this.authIds = keysArr.join(',');
    },
    //弹出框确定
    saveEdit () {
      let parmam = { role_name: this.roleName, status: this.status ? 1 : 0, auth_ids: this.authIds, is_gl: this.is_gl ? 1 : 0 };
      let url = api.ROLE_ADD;
      if (this.editOrAdd == 2) {
        parmam.id = this.id;
        url = api.ROLE_EDIT;
      }
      const loading = this.$loading({ text: '保存中...' });
      this.$http
        .post(url, parmam)
        .then(res => {
          loading.close();
          console.log('保存成功', res);
          if (res.code == 1) {
            this.$message.success('保存成功');
            this.editVisible = false;
            this.initAjaxMethod();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    //点击删除
    handleDelete (data) {
      let id = data.id;
      console.log(id);
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http.post(api.ROLE_DEL, { id: id }).then(res => {
            //console.log(res)
            if (res.code == 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.editVisible = false;
              this.initAjaxMethod();
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
  }
};
</script>


<style scoped>
.roleInput {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 20px 0;
}
  .list-title{
    padding:7px;
  }
</style>